<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right2" ref="right" v-loading="jiazaizhong">
        <top></top>

        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>报表
        </div>
        <div class="hei10"></div>
        <div class="kflex" style="background: rgb(249, 249, 249); position: relative;">
          <!-- <div class="bli">综合看板</div>
          <div class="bli">自营报表</div>
          <div class="bli">分销报表</div>
          <div class="bli">商品分析</div> -->
          <div class="bli" @click="goid('/xinbaobiao')">综合查询</div>
          <div class="bli bliact" @click="goid('/xinbaobiao/yunyingbaobiao')">运营报表</div>
          <!-- <div class="bli">聚焦分析</div> -->

          <div
            style="position: absolute; right: 10px; top: 0; padding: 20px; color: rgb(42, 67, 255); font-size: 14px; cursor: pointer;"
            @click="goid('/setup/dingdanlaiyuan/dingdanlaiyuan')">
            <i class="el-icon-s-tools" style="color: rgb(42, 67, 255); margin-right: 5px; "></i>销售渠道划分
          </div>
        </div>
        <div style="padding: 20px 20px 30px 20px;">

          <div>
            <div style="margin-bottom: 20px;"><span @click="back" style="color: #409eff; margin-right: 20px; cursor: pointer;">< 返回</span>{{all.source}}店铺销售情况</div>
            <div class="kflex" style="margin-bottom: 20px;">
              <div class="kflexc" style="width: 100%;">
                <div>
                  <div class="kflexc">
                    <div class="kflex inp20">
                      <div class="f2">
                        <el-select clearable v-model="all.author_id" filterable placeholder="选择二级来源">
                          <el-option :label="item.nick_name" :value="item.nick_name"  v-for="item in erjilist" :key="item.id" ></el-option>
                        </el-select>
                      </div>
                      <div class="f2">
                        <el-select clearable v-model="all.page_id" filterable placeholder="选择商品">
                          <el-option :label="item.title" :value="item.id"  v-for="item in shangpinlist" :key="item.id" ></el-option>
                        </el-select>
                      </div>
                    </div>

                  </div>
                </div>
                <div class="f2">
                  <el-button size="medium" type="danger" @click="getshujus()">搜索</el-button>
                  <el-button size="medium" class="zhge" type="danger" @click="daochu">导出当前数据</el-button>
                </div>
                <div class="f2">
                  <el-button size="medium" type="primary" icon="el-icon-setting" @click="tuozhuaishow">设置数据字段</el-button>
                </div>
              </div>
            </div>

            <el-table :data="tableData" class="bushi" border :header-cell-style="{'border-bottom':'solid 1px #d2d3da','text-align':'center','background-color':'rgb(249, 249, 249)'}" style="width: 100%" >
              <el-table-column width="200" fixed prop="date" align="center" label="日期"></el-table-column>
              <template v-for="item in xianshideziduan" :label="item.label">
                  <el-table-column align="center" :label="item.name" v-if="item.xianshima">
                    <template slot-scope="scope">
                      <div class="kflexcc">
                        <div v-if="item.value == 'source'">{{scope.row.source}}</div>
                        <div v-if="item.value == 'amount'">{{scope.row.amount}}</div>
                        <div v-if="item.value == 'payed_amount'">{{scope.row.payed_amount}}</div>
                        <div v-if="item.value == 'not_payed_amount'">{{scope.row.not_payed_amount}}</div>
                        <div v-if="item.value == 'yuandingdan'">{{scope.row.yuandingdan}}</div>
                        <div v-if="item.value == 'star_order'">{{scope.row.star_order}}</div>
                        <div v-if="item.value == 'video_order'">{{scope.row.video_order}}</div>
                        <div v-if="item.value == 'promote_order'">{{scope.row.promote_order}}</div>
                        <div v-if="item.value == 'ziran'">{{scope.row.ziran}}</div>
                        <div v-if="item.value == 'ziranlv'">{{scope.row.ziranlv}}</div>
                        <div v-if="item.value == 'deliver_amount'">{{scope.row.deliver_amount}}</div>
                        <div v-if="item.value == 'fahuolv'">{{scope.row.fahuolv}}</div>
                        <div v-if="item.value == 'fahuolvyizhifu'">{{scope.row.fahuolvyizhifu}}</div>
                        <div v-if="item.value == 'fail_amount'">{{scope.row.fail_amount}}</div>
                        <div v-if="item.value == 'refund_amount'">{{scope.row.refund_amount}}</div>
                        <div v-if="item.value == 'deliver_money_amount'">{{scope.row.deliver_money_amount}}</div>
                        <div v-if="item.value == 'other_cost'">{{scope.row.other_cost}}</div>
                        <div v-if="item.value == 'promote_cost'">{{scope.row.promote_cost}}</div>
                        <div v-if="item.value == 'fahuochengben'">{{scope.row.fahuochengben}}</div>
                        <div v-if="item.value == 'deal_rate'">{{scope.row.deal_rate}}</div>
                        <div v-if="item.value == 'active_amount'">{{scope.row.active_amount}}</div>
                        <div v-if="item.value == 'sum_pay_amount'">{{scope.row.sum_pay_amount}}</div>
                        <div v-if="item.value == 'to_open_card_amount'">{{scope.row.to_open_card_amount}}</div>
                        <div v-if="item.value == 'to_deliver_card_amount'">{{scope.row.to_deliver_card_amount}}</div>
                        <div v-if="item.value == 'jihuochengben'">{{scope.row.jihuochengben}}</div>
                        <div v-if="item.value == 'jihuolvandingdan'">{{scope.row.jihuolvandingdan}}</div>
                        <div v-if="item.value == 'jihuolvanfahuo'">{{scope.row.jihuolvanfahuo}}</div>
                        <div v-if="item.value == 'jihuolvyizhifu'">{{scope.row.jihuolvyizhifu}}</div>
                        <div v-if="item.value == 'jihuolvweizhifu'">{{scope.row.jihuolvweizhifu}}</div>
                        <div v-if="item.value == 'only_active_amount'">{{scope.row.only_active_amount}}</div>
                        <div v-if="item.value == 'recharge_amount'">{{scope.row.recharge_amount}}</div>
                      </div>
                    </template>
                  </el-table-column>
              </template>
              <!-- <el-table-column width="120" prop="amount" align="center" label="总订单"></el-table-column>
              <el-table-column width="120" prop="payed_amount" align="center" label="已支付"></el-table-column>
              <el-table-column width="120" prop="not_payed_amount" align="center" label="待支付"></el-table-column>
              <el-table-column width="120" prop="ori_amount" align="center" label="店铺原订单数"></el-table-column>
              <el-table-column width="120" label="达人订单（抖音专属）">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.star_order}}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120" prop="video_order" align="center" label="短视频订单">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.video_order}}</div>

                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120" prop="promote_order" align="center" label="推广订单">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.promote_order}}</div>

                    </div>
                  </template>
                </el-table-column>

                <el-table-column width="120" prop="ziran" align="center" label="自然订单">

                </el-table-column>
                <el-table-column width="120" prop="ziranlv" align="center" label="自然订单占比">

                </el-table-column>

                <el-table-column width="120" prop="deliver_amount" align="center" label="发货订单"></el-table-column>

                <el-table-column width="120" prop="date" align="center" label="发货率">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.fahuolv}}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120" prop="fahuolvyizhifu" align="center" label="已支付发货率"></el-table-column>

                <el-table-column width="120" prop="fail_amount" align="center" label="开卡失败"></el-table-column>

                <el-table-column width="120" prop="refund_amount" align="center" label="退款成功"></el-table-column>

                <el-table-column width="120" prop="deliver_money_amount" align="center" label="已发货交易额"></el-table-column>
                <el-table-column width="120" prop="other_cost" align="center" label="其他费用（自己填写）">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.other_cost}}</div>

                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120" prop="promote_cost" align="center" label="推广费用（自己填）">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.promote_cost}}</div>

                    </div>
                  </template>
                </el-table-column>

                <el-table-column width="120" prop="fahuochengben" align="center" label="发货成本"></el-table-column>

                <el-table-column width="120" prop="deal_rate" align="center" label="观看成交率（快手）">
                  <template slot-scope="scope">
                    <div class="kflexcc">
                      <div>{{scope.row.deal_rate}}</div>

                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120" prop="active_amount" align="center" label="总激活量"></el-table-column>
                <el-table-column width="120" prop="only_active_amount" align="center" label="仅激活量"></el-table-column>
                <el-table-column width="120" prop="recharge_amount" align="center" label="激活且充值"></el-table-column>
                <el-table-column width="120" prop="sum_pay_amount" align="center" label="总交易额"></el-table-column>
                <el-table-column width="120" prop="to_open_card_amount" align="center" label="待开卡"></el-table-column>
                <el-table-column width="120" prop="to_deliver_card_amount" align="center" label="待发货"></el-table-column>


                <el-table-column width="120" prop="jihuochengben" align="center" label="激活成本"></el-table-column>
                <el-table-column width="120" prop="jihuolvandingdan" align="center" label="激活率按总订单"></el-table-column>
                <el-table-column width="120" prop="jihuolvanfahuo" align="center" label="激活率按发货"></el-table-column>
                <el-table-column width="120" prop="jihuolvyizhifu" align="center" label="激活率/已支付"></el-table-column>
                <el-table-column width="120" prop="jihuolvweizhifu" align="center" label="激活率/未支付"></el-table-column> -->


                <el-table-column width="350" prop="date" align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="goid2('/xinbaobiao/yunyingbaobiao4',all.source)">按商品销售查看</el-button>
                    <el-button type="text" @click="goid2('/xinbaobiao/yunyingbaobiaot',all.source)">按二级来源查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </div>
      </div>
    </div>
    <notice></notice>
    <yunxingshujulog ref="yunxingshujulog" v-if="luruyunxingshujulog" :source="yunxingshujusource"  :title="yunxingshujusource + '录入运营数据'" :date2="yunxingshujudate" @yunxinggengxin="yunxinggengxin"></yunxingshujulog>
    <tuozhuaiyunying ref="tuozhuaiyunying" @tuozhuaishowclose="tuozhuaishowclose" v-if="shanxuanlog" :xianshideziduan2="xianshideziduan" @xianshideshuju="xianshideshuju"></tuozhuaiyunying>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
  import peizhi from '@/assets/peizhi.js'
  import moment from 'moment'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx';
  import yunxingshujulog from './components/yunxingshujulog2'
  import tuozhuaiyunying from './components/tuozhuaiyunying'

  import {
    parse
  } from 'semver'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      "notice": notice,
      yunxingshujulog,
      tuozhuaiyunying
    },
    name: 'index',
    data() {
      return {
        tableData: [],
        all: {
          start: this.$route.query.start, //	2023-03-07	是	string	无
          end: this.$route.query.end, //	2023-03-16	是	string	无
          source:this.$route.query.source,
          page_id:""
        },
        luruyunxingshujulog:false,
        yunxingshujusource:"",
        yunxingshujudate:"",
        shangpinlist:"",
        erjilist:"",
        xianshideziduan:[
          {name:"总订单",value:"amount",xianshima:true,tex:""},
          {name:"待支付",value:"not_payed_amount",xianshima:true,tex:""},
          {name:"店铺原订单数",value:"yuandingdan",xianshima:true,tex:""},
          {name:"达人订单（抖音专属）",value:"star_order",xianshima:true,tex:""},
          {name:"短视频订单",value:"video_order",xianshima:true,tex:""},
          {name:"推广订单",value:"promote_order",xianshima:true,tex:""},
          {name:"自然订单",value:"ziran",xianshima:true,tex:""},
          {name:"自然订单占比",value:"ziranlv",xianshima:true,tex:""},
          {name:"发货订单",value:"deliver_amount",xianshima:true,tex:""},
          {name:"发货率",value:"fahuolv",xianshima:true,tex:""},
          {name:"开卡失败",value:"fail_amount",xianshima:true,tex:""},
          {name:"退款成功",value:"refund_amount",xianshima:true,tex:""},
          {name:"已发货交易额",value:"deliver_money_amount",xianshima:true,tex:""},
          {name:"其他费用（自己填写）",value:"other_cost",xianshima:true,tex:""},
          {name:"推广费用（自己填）",value:"promote_cost",xianshima:true,tex:""},
          {name:"发货成本",value:"fahuochengben",xianshima:true,tex:""},
          {name:"总激活量",value:"active_amount",xianshima:true,tex:""},
          {name:"仅激活量",value:"only_active_amount",xianshima:true,tex:""},
          {name:"激活且充值",value:"recharge_amount",xianshima:true,tex:""},
          {name:"总交易额",value:"sum_pay_amount",xianshima:true,tex:""},
          {name:"待开卡",value:"to_open_card_amount",xianshima:true,tex:""},
          {name:"待发货",value:"to_deliver_card_amount",xianshima:true,tex:""},
          {name:"激活成本",value:"jihuochengben",xianshima:true,tex:""},
          {name:"激活率按总订单",value:"jihuolvandingdan",xianshima:true,tex:""},
          {name:"激活率按发货",value:"jihuolvanfahuo",xianshima:true,tex:""},
          {name:"激活率/已支付",value:"jihuolvyizhifu",xianshima:true,tex:""},
          {name:"激活率/未支付",value:"jihuolvweizhifu",xianshima:true,tex:""},
          // {name:"已支付发货率",value:"fahuolvyizhifu",xianshima:true,tex:""},
          // {name:"观看成交率（快手）",value:"deal_rate",xianshima:true,tex:""},
          
          // {name:"已支付",value:"payed_amount",xianshima:true,tex:""},
          // {name:"订单来源",value:"source",xianshima:true,tex:""},
        ],
        shanxuanlog:false,
      }
    },
    watch: {

    },

    created() {
      if(localStorage.getItem('xianshideziduanyunying2')){
        this.xianshideziduan = JSON.parse(localStorage.getItem('xianshideziduanyunying2'))
      }
    },
    mounted() {

      this.getshujus()
      this.geterji()
      this.getshangpinlist()
    },
    methods: {
      xianshideshuju:function(xianshideshuju){
        localStorage.setItem('xianshideziduanyunying2',JSON.stringify(xianshideshuju))
        this.xianshideziduan = xianshideshuju
      },
      tuozhuaishow:function(){
        this.shanxuanlog = true
        this.$nextTick(()=>{
          this.$refs.tuozhuaiyunying.log = true
        })
      },
      tuozhuaishowclose: function() {
        this.shanxuanlog = false
      },
      geterji:function(){
        axios.get('/api/plan-market/sub-source/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.erjilist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getshangpinlist:function(){
        axios.get('/api/gth/order-pages2',{params:{
          status:100,
          _page:1,
          _page_size:1000
        }})
                  .then(response => {
                    if (response.data.msg.code == 0) {
                      this.shangpinlist = response.data.data.data
                    } else {
                      this.$message.error(response.data.msg.info);
                    }
                  })
      },
      goid2:function(url,item){
        this.$router.push({
          path:url,
          query:{
            start: this.all.start, //	2023-03-07	是	string	无
            end:  this.all.end, //	2023-03-16	是	string	无
            source:this.all.source
          }
        })
      },
      back:function(){
        this.$router.go(-1)
      },
      yunxinggengxin:function(){
        this.luruyunxingshujulog = false
        this.getshujus()
      },
      luruyunxingshuju:function(item){
        this.yunxingshujusource = this.$route.query.source
        this.yunxingshujudate = item.date

        this.luruyunxingshujulog = true
        this.$nextTick(()=>{
          this.$refs.yunxingshujulog.log = true
        })
      },
      getshujus: function() {
        axios.get('/api/form/operator/data',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data
              this.tableData.forEach(item=>{
                // this.$set(item,'fahuolv',this.baifenbi2(item.deliver_amount,item.amount))
                if(!item.promote_cost){
                  item.promote_cost = 0
                }
                if(!item.other_cost){
                  item.other_cost = 0
                }
                if(!item.promote_order){
                  item.promote_order = 0
                }
                if(!item.video_order){
                  item.video_order = 0
                }
                if(!item.deal_rate){
                  item.deal_rate = 0
                }else{
                  item.deal_rate = (parseFloat(item.deal_rate)).toFixed(2) + '%'
                }

                item.fahuolv = this.baifenbi2(item.deliver_amount,item.amount)
                item.ziran = item.amount - item.promote_order - item.video_order
                item.ziranlv = this.baifenbi2(item.ziran,item.amount)
                item.fahuolvyizhifu = this.baifenbi2(item.payed_amount,item.amount)
                item.fahuochengben = this.baifenbi3(parseFloat(item.promote_cost) + parseFloat(item.other_cost) - parseFloat(item.deliver_money_amount),parseFloat(item.deliver_amount))

                item.jihuochengben = this.baifenbi3(parseFloat(item.promote_cost) + parseFloat(item.other_cost) - parseFloat(item.deliver_money_amount),parseFloat(item.active_amount))

                item.jihuolvandingdan = this.baifenbi2(item.active_amount,item.amount)
                item.jihuolvanfahuo = this.baifenbi2(item.active_amount,item.deliver_amount)
                item.jihuolvyizhifu = this.baifenbi2(item.active_amount,item.payed_amount)
                item.jihuolvweizhifu = this.baifenbi2(item.active_amount,item.not_payed_active_amount)
                item.yuandingdan = item.amount - item.daren_amount
              })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      baifenbi3:function(a,b){
        if(b==0){
            return '0.00'
        }else{
            return ((parseFloat(a/b))).toFixed(2)
        }
      },
      baifenbi2:function(a,b){
        if(b==0){
            return '0.00%'
        }else{
            return ((parseFloat(a/b))*100).toFixed(2) + '%'
        }
      },

      daochu: function() {
        var wopts = {
          bookType: 'xlsx',
          bookSST: true,
          type: 'binary'
        };
        var workBook = {
          SheetNames: ['Sheet1'],
          Sheets: {},
          Props: {}
        };

        let arrheader = []
        let obj2 = {}
        this.xianshideziduan.forEach(item=>{
          if(item.xianshima){
            arrheader.push(item.value)
            obj2[item.value] = item.name
          }
        })
        const header = arrheader
        const header_zh = obj2

       // const header = ['date','amount', 'source', 'ori_amount', 'daren_amount', 'deliver_amount', 'deliver_money_amount', 'fail_amount',  'refund_amount',  'payed_amount', 'not_payed_amount', 'recharge_amount',  'promote_cost', 'other_cost', 'promote_order', 'video_order', 'deal_rate', 'fahuolv', 'ziran', 'ziranlv', 'fahuolvyizhifu', 'fahuochengben', 'jihuochengben', 'jihuolvandingdan', 'jihuolvanfahuo', 'jihuolvyizhifu', 'jihuolvweizhifu'];
       // const header_zh = {
       //      'date':"日期",
       //      'amount':"总订单",
       //      'source':"订单来源",
       //      'ori_amount':"店铺原订单数",
       //      'daren_amount':"达人订单（抖音专属）",
       //      'deliver_amount':"发货订单",
       //      'deliver_money_amount':"已发货交易额",
       //      'fail_amount':"开卡失败",
       //      'refund_amount':"退款成功",
       //      'payed_amount':"已支付",
       //      'not_payed_amount':"待支付",
       //      'recharge_amount':"总激活量",
       //      'promote_cost':"推广费用（自己填）",
       //      'other_cost':"其他费用（自己填写）",
       //      'promote_order':"推广订单",
       //      'video_order':"短视频订单",
       //      'deal_rate':"观看成交率（快手）",
       //      'fahuolv':"发货率",
       //      'ziran':"自然订单",
       //      'ziranlv':"自然订单占比",
       //      'fahuolvyizhifu':"已支付发货率",
       //      'fahuochengben':"发货成本",
       //      'jihuochengben':"激活成本",
       //      'jihuolvandingdan':"激活率按总订单",
       //      'jihuolvanfahuo':"激活率按发货",
       //      'jihuolvyizhifu':"激活率/已支付",
       //      'jihuolvweizhifu':"激活率/未支付"
       // };
       // let arr = []

       // this.tableData.forEach(item=>{
       //   let obj = {
       //     'date':item.date,
       //     'amount':item.amount,
       //     'source':item.source,
       //     'ori_amount':item.ori_amount,
       //     'daren_amount':item.daren_amount,
       //     'deliver_amount':item.deliver_amount,
       //     'deliver_money_amount':item.deliver_money_amount,
       //     'fail_amount':item.fail_amount,
       //     'refund_amount':item.refund_amount,
       //     'payed_amount':item.payed_amount,
       //     'not_payed_amount':item.not_payed_amount,
       //     'recharge_amount':item.recharge_amount,
       //     'promote_cost':item.promote_cost,
       //     'other_cost':item.other_cost,
       //     'promote_order':item.promote_order,
       //     'video_order':item.video_order,
       //     'deal_rate':item.deal_rate,
       //     'fahuolv':item.fahuolv,
       //     'ziran':item.ziran,
       //     'ziranlv':item.ziranlv,
       //     'fahuolvyizhifu':item.fahuolvyizhifu,
       //     'fahuochengben':item.fahuochengben,
       //     'jihuochengben':item.jihuochengben,
       //     'jihuolvandingdan':item.jihuolvandingdan,
       //     'jihuolvanfahuo':item.jihuolvanfahuo,
       //     'jihuolvyizhifu':item.jihuolvyizhifu,
       //     'jihuolvweizhifu':item.jihuolvweizhifu
       //   }
       //   arr.push(obj)
       // })
       let arr = []
       this.tableData.forEach(item=>{
         let obj = {}
         this.xianshideziduan.forEach(item2=>{
           if(item2.xianshima){
             obj[item2.value] = item[item2.value]
           }
         })
         arr.push(obj)
         // let obj = {
         //   'amount':item.amount,
         //   'source':item.source,
         //   'ori_amount':item.ori_amount,
         //   'daren_amount':item.daren_amount,
         //   'deliver_amount':item.deliver_amount,
         //   'deliver_money_amount':item.deliver_money_amount,
         //   'fail_amount':item.fail_amount,
         //   'refund_amount':item.refund_amount,
         //   'payed_amount':item.payed_amount,
         //   'not_payed_amount':item.not_payed_amount,
         //   'recharge_amount':item.recharge_amount,
         //   'promote_cost':item.promote_cost,
         //   'other_cost':item.other_cost,
         //   'promote_order':item.promote_order,
         //   'video_order':item.video_order,
         //   'deal_rate':item.deal_rate,
         //   'fahuolv':item.fahuolv,
         //   'ziran':item.ziran,
         //   'ziranlv':item.ziranlv,
         //   'fahuolvyizhifu':item.fahuolvyizhifu,
         //   'fahuochengben':item.fahuochengben,
         //   'jihuochengben':item.jihuochengben,
         //   'jihuolvandingdan':item.jihuolvandingdan,
         //   'jihuolvanfahuo':item.jihuolvanfahuo,
         //   'jihuolvyizhifu':item.jihuolvyizhifu,
         //   'jihuolvweizhifu':item.jihuolvweizhifu
         // }
       })
        const arrayWithHeader = [header_zh, ...arr];
        workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(arrayWithHeader,{
            header: header,
            skipHeader: true
        });
        console.log(workBook)
        FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {
          type: 'application/octet-stream'
        }), "sheetjs.xlsx")
      },
      changeData: function(s) {
        //如果存在ArrayBuffer对象(es6) 最好采用该对象
        if (typeof ArrayBuffer !== 'undefined') {
          //1、创建一个字节长度为s.length的内存区域
          var buf = new ArrayBuffer(s.length);
          //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
          var view = new Uint8Array(buf);
          //3、返回指定位置的字符的Unicode编码
          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
          return buf;
        } else {
          var buf = new Array(s.length);
          for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
          return buf;
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .index {
    background: #F4F4F4;

    .shangqu {
      position: fixed;
      top: 0;
      background: #fff !important;
      z-index: 999;
    }


    // ::-webkit-scrollbar {
    // /*滚动条整体样式*/
    // width : 15px;  /*高宽分别对应横竖滚动条的尺寸*/
    // height: 15px;
    // }
    // ::-webkit-scrollbar-thumb {
    // /*滚动条里面小方块*/
    // border-radius: 0px;
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    // background   : #ccc;
    // }
    // ::-webkit-scrollbar-track {
    // /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    // border-radius: 0px;
    // background   : #eaeaea;
    // }

    // .gdt::-webkit-scrollbar {
    //   /*滚动条整体样式*/
    //   width: 0px;
    //   /*高宽分别对应横竖滚动条的尺寸*/
    //   height: 0px;
    // }

    // .gdt::-webkit-scrollbar-thumb {
    //   /*滚动条里面小方块*/
    //   border-radius: 0px;
    //   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //   background: #535353;
    // }

    // .gdt::-webkit-scrollbar-track {
    //   /*滚动条里面轨道*/
    //   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //   border-radius: 0px;
    //   background: #ededed;
    // }

    // .right{
    //   /* 设置滚动条的样式 */
    //   ::-webkit-scrollbar {
    //     width: 15px;
    //   }

    //   /* 滚动槽 */
    //   ::-webkit-scrollbar-track {
    //     -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    //     border-radius: 15px;
    //   }

    //   /* 滚动条滑块 */
    //   ::-webkit-scrollbar-thumb {
    //     border-radius: 15px;
    //     background: rgba(0, 0, 0, 0.1);
    //     -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    //   }

    //   ::-webkit-scrollbar-thumb:window-inactive {
    //     background: rgba(0, 0, 0, 0.1);
    //   }
    // }


    .bli {
      padding: 20px 35px;
      color: rgb(123, 134, 153);
      font-size: 16px;
    }

    .bliact {
      background: #fff !important;
      color: #333 !important;
    }




    .f1 {
      text-align: right;
      font-size: 14px;
    }

    .f2 {
      font-size: 14px;
    }



  }
</style>
